<script setup lang="ts">
import { ref, reactive } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import {
  ElMessage,
  UploadFile,
  UploadUserFile,
  FormInstance,
  FormRules
} from "element-plus";

import { uploadUri, upload, download, url, fetch } from "@/utils/storm/file";

import { FileData, FileOption } from "@/api/file";

defineOptions({
  name: "File-Load"
});

interface RuleForm {
  id: string;
  code: string;
}

const fileList = ref<UploadUserFile[]>([]);

const fileInfo: FileData = reactive({
  id: "",
  code: "",
  name: "",
  origin: "",
  type: "",
  size: "",
  path: ""
});

const form = reactive<RuleForm>({
  id: "",
  code: ""
});
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  id: [{ required: true, message: "id 不可为空", trigger: "blur" }],
  code: [{ required: true, message: "code 不可为空", trigger: "blur" }]
});

const doUpload = async (uploadForm: { file: File }) => {
  const file: File = uploadForm.file;
  const fileOption: FileOption = {
    mark: true,
    time: "PT1H",
  };
  const { data } = await upload(file, fileOption);

  fileInfo.id = data.id;
  fileInfo.code = data.code;
  fileInfo.name = data.name;
  fileInfo.origin = data.origin;
  fileInfo.type = data.type;
  fileInfo.size = data.size;
  fileInfo.path = data.path;

  const id = data.id;
  const code = data.code;
  const fileParam = {
    id: id,
    code: code
  };

  const fileUrl = url(fileParam);
  fileList.value = [
    {
      name: file.name,
      url: fileUrl
    }
  ];

  form.id = id;
  form.code = code;
};

const handlePreview = (uploadFile: UploadFile) => {
  const name = uploadFile.name;
  const url = uploadFile.url?.toString() || "";
  fetch(name, url);
};

const doDownload = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.validate(valid => {
    if (valid) {
      const id = form.id;
      const code = form.code;
      const param = {
        id: id,
        code: code
      };
      download({ param });
    } else {
      ElMessage.error("参数校验失败");
      return false;
    }
  });
};
</script>

<template>
  <el-card>
    <el-divider content-position="left">上传文件</el-divider>

    <el-upload
      drag
      :action="uploadUri"
      :http-request="doUpload"
      :file-list="fileList"
      :on-preview="handlePreview"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">file with a size less than 1MB</div>
        <div class="el-upload__tip">
          此处上传均为临时文件，默认有效期为 1 天
        </div>
      </template>
    </el-upload>

    <el-divider content-position="left">文件信息</el-divider>

    <el-descriptions title="File Info">
      <el-descriptions-item label="id:">{{ fileInfo.id }}</el-descriptions-item>
      <el-descriptions-item label="code:">{{
        fileInfo.code
      }}</el-descriptions-item>
      <el-descriptions-item label="name:">{{
        fileInfo.name
      }}</el-descriptions-item>
      <el-descriptions-item label="origin:">{{
        fileInfo.origin
      }}</el-descriptions-item>
      <el-descriptions-item label="type:">{{
        fileInfo.type
      }}</el-descriptions-item>
      <el-descriptions-item label="size:">{{
        fileInfo.size
      }}</el-descriptions-item>
      <el-descriptions-item label="path:">{{
        fileInfo.path
      }}</el-descriptions-item>
      <el-descriptions-item label="url:">
        <el-link :href="url(fileInfo)" target="_blank" type="primary">
          {{ url(fileInfo) }}
        </el-link>
      </el-descriptions-item>
    </el-descriptions>

    <el-divider content-position="left">下载文件</el-divider>

    <el-form label-width="100px" :model="form" ref="formRef" :rules="rules">
      <el-form-item label="文件 ID" prop="id">
        <el-input v-model="form.id" placeholder="文件 ID" />
      </el-form-item>
      <el-form-item label="文件 Code" prop="code">
        <el-input v-model="form.code" placeholder="文件 Code" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="doDownload(formRef)">
          download
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
